<template>
  <div>
      <!-- 一级菜单 -->
    <el-menu-item v-if="!datas.children" :index="datas.index">
      <span slot="title">{{datas.name}}</span>
    </el-menu-item>
    <!-- 二级菜单 -->
    <el-submenu :index="datas.index" v-else >
        <template slot="title">
          <span>{{datas.name}}</span>
        </template>
       <!-- 多级菜单 -->
       <menu-item   v-for="item in datas.children" :datas="item" :key="item.index"></menu-item>
      </el-submenu>
  </div>
</template>
<script>
export default {
    name:"MenuItem",
    //接收父组件传递的数据，进行渲染
    props:["datas"]
};
</script>